<!--
 * @Description: 评论管理页面
 * @Date: 2023-03-31 15:52:54
 * @LastEditTime: 2023-04-11 20:51:25
 * @Author: Black
 * @FilePath: \store_admin\src\views\comment\list.vue
-->

<template>
	<el-card shadow="never" class="border-0">

		<ListHeader layout="refresh" @refresh="getData">
			<SearchForm :model="searchForm" @search="getData" @reset="resetSearchForm">
				<SearchItem label="关键词">
					<el-input v-model="searchForm.title" placeholder="商品标题" class="w-full" @keyup.enter.native="getData" clearable>
						<template #prefix>
							<el-icon>
								<Search />
							</el-icon>
						</template>
					</el-input>
				</SearchItem>
			</SearchForm>
		</ListHeader>

		<el-table default-expand-all :data="tableData" stripe style="width: 100%" v-loading="loading">
			<el-table-column type="expand">
				<template #default="{ row }">
					<div class="flex pl-18">
						<el-avatar :size="50" :src="row.user.avatar" fit="fill" class="mr-3"></el-avatar>
						<div class="flex-1">
							<h6 class="flex items-center">
								{{ row.user.nickname || row.user.username }}
								<small class=" text-gray-400 ml-2">{{ row.review_time }}</small>
								<el-button size="small" class="ml-auto" @click="openTextarea(row)"
									v-if="!row.textareaEdit && !row.extra">回复</el-button>
							</h6>
							{{ row.review.data }}
							<div class="py-2">
								<el-image v-for="(item, index) in row.review.image" :key="index" :src="item" fit="cover" :lazy="true"
									style="width: 100px;height: 100px;" class="rounded"></el-image>
							</div>
							<div v-if="row.textareaEdit">
								<el-input v-model="textarea" placeholder="请输入评价内容" type="textarea" :rows="2"></el-input>
								<div class="py-2">
									<el-button type="primary" size="small" @click="review(row)">回复</el-button>
									<el-button size="small" class="ml-2" @click="row.textareaEdit = false">取消</el-button>
								</div>
							</div>
							<template v-else>
								<div class="mt-3 bg-gray-100 p-3 rounded" v-for="(item, index) in row.extra" :key="index">
									<h6 class="flex font-bold">
										客服
										<el-button type="info" size="small" class="ml-auto"
											@click="openTextarea(row, item.data)">修改</el-button>
									</h6>
									<p>{{ item.data }}</p>
								</div>
							</template>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="ID" width="70" align="center" prop="id" />
			<el-table-column label="商品" width="200">
				<template #default="{ row }">
					<div class="flex items-center">
						<el-image :src="row.goods_item ? row.goods_item.cover : ''" fit="fill" :lazy="true"
							style="width:50px;height:50px;" class="rounded"></el-image>
						<div class="ml-3">
							<h6>{{ row.goods_item?.title ?? '商品已被删除' }}</h6>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="评价信息" width="200">
				<template #default="{ row }">
					<div>
						<p>用户：{{ row.user.nickname || row.user.username }}</p>
						<p><el-rate v-model="row.rating" disabled show-score text-color="#ff9900" /></p>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="评价时间" width="180" align="center" prop="review_time" />
			<el-table-column label="状态">
				<template #default="{ row }">
					<el-switch :modelValue="row.status" :active-value="1" :inactive-value="0" :loading="row.statusLoading"
						:disabled="row.super == 1" @change="handleStatusChange($event, row)">
					</el-switch>
				</template>
			</el-table-column>
		</el-table>

		<div class="flex items-center justify-center mt-5">
			<el-pagination background layout="prev,pager,next" :total="total" :current-page="currentPage" :page-size="limit"
				@current-change="getData" />
		</div>

	</el-card>
</template>
  
<script setup>
import { ref } from 'vue'
import {
	getGoodsCommentList,
	updateGoodsCommentStatus,
	reviewGoodsComment
} from '~/api/goods_comment.js';
import { toast } from "~/composables/util"
import ListHeader from "~/components/ListHeader.vue";
import SearchForm from "~/components/SearchForm.vue";
import SearchItem from "~/components/SearchItem.vue";
import { useInitTable } from '~/composables/useCommon.js'

const roles = ref([])

const {
	searchForm,
	resetSearchForm,
	tableData,
	loading,
	currentPage,
	total,
	limit,
	getData,
	handleStatusChange
} = useInitTable({
	searchForm: {
		title: ""
	},
	getList: getGoodsCommentList,
	onGetListSuccess: (res) => {
		tableData.value = res.list.map(o => {
			o.statusLoading = false
			o.textareaEdit = false
			return o
		})
		total.value = res.totalCount
		roles.value = res.roles
	},
	updateStatus: updateGoodsCommentStatus,
})


const textarea = ref("")
const openTextarea = (row, data = "") => {
	textarea.value = data
	row.textareaEdit = true
}

const review = (row) => {
	if (textarea.value == "") {
		return toast("回复内容不能为空", "error")
	}
	reviewGoodsComment(row.id, textarea.value)
		.then(res => {
			row.textareaEdit = false
			toast("回复成功")
			getData()
		})
}

</script>
  